<template>
  <div id="cesiumContainer" ref="cesiumContainer"></div>
</template>

<script setup>
//引入cesium 引入样式 引入生命周期挂载
import * as Cesium from 'cesium';
import './Widgets/widgets.css';
import { onMounted } from 'vue';

//设置cesium token
Cesium.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0MGNkNzY3YS1mMDcxLTQ0NjQtOTlhMC00Y2Y0MjA3ZGQ1ZTIiLCJpZCI6MjY0NzQyLCJpYXQiOjE3MzUwOTQ0NzF9.09AnFzH3aVpi7s-0WqcAYuf69lr4UUIbKL4DmKBf1qg';

//设置根目录静态资源 /代表根目录public
window.CESIUM_BASE_URL = '/';

//设置地球模型相机默认视角
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
  //西边的经度
  89.5,
  //南边的纬度
  20.4,
  //东边的经度
  110.4,
  //北边的纬度
  61.2
);

onMounted(() => {
  // 通过设置查看器挂载到id标识上
  var viewer = new Cesium.Viewer('cesiumContainer', {
    //是否显示信息窗口
    infoBox: false,
    //右上角搜索框显示隐藏
    geocoder: false,
    //右上角home切换返回地球模型
    homeButton: false,
    //右上角场景2D3D切换按钮显示隐藏
    sceneModePicker: false,
    //右上角是否显示图层模式切换显示隐藏
    baseLayerPicker: false,
    //右上角帮助提示按钮显示隐藏
    navigationHelpButton: false,
    //左下角是否播放动画指针
    animation: false,
    //下方时间轴
    timeline: false,
    //右下角全屏按钮
    fullscreenButton: false,
    //设置天空盒
    skyBox: new Cesium.SkyBox({
      sources: {
        positiveX: './texture/sky/sky_px.jpg',
        negativeX: './texture/sky/sky_nx.jpg',
        positiveY: './texture/sky/sky_ny.jpg',
        negativeY: './texture/sky/sky_py.jpg',
        positiveZ: './texture/sky/sky_pz.jpg',
        negativeZ: './texture/sky/sky_px.jpg',
      },
    }),

    //加载不出来的时候可以使用自定义天地图
    imageProvider: new Cesium.WebMapTileServiceImageryProvider({
      url: 'http://t0.tianditu.gov.cn/vec_w/wmts?tk=5811ea791aaba79251ad79c775c4caa1',
      layer: 'tdtBasicLayer',
      style: 'default',
      format: 'image/jpeg',
      tileMatrixSetID: 'GoogleMapsCompatible',
    }),
  });

  //地图叠加天地图国境线
  var imageryLayers = viewer.imageryLayers;
  var layer = imageryLayers.addImageryProvider(
    new Cesium.WebMapTileServiceImageryProvider({
      url: 'http://t0.tianditu.gov.cn/ibo_w/wmts?tk=5811ea791aaba79251ad79c775c4caa1',
      layer: 'tdtBasicLayer',
      style: 'default',
      format: 'image/jpeg',
      tileMatrixSetID: 'GoogleMapsCompatible',
    })
  );
  //设置图层的透明度
  layer.alpha = 0.5;

  //隐藏底部logo
  viewer.cesiumWidget.creditContainer.style.display = 'none';
});
</script>

<style>
/* 初始化边距 */
* {
  margin: 0;
  padding: 0;
}
/* 初始化模型和屏幕占位 */
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>
